<template>
    <div>
        <div class="indexBanner">
            <swiper :options="swiperOption" ref="mySwiper" class="bannerOption swiper-no-swiping">
                <swiper-slide v-for="item in indexMsg.banner" :key="item.id" class="uploadImgBox">
                    <a  target="_blank" :href="item.url" >
                    <img :src="item.image">
                    </a>
                </swiper-slide>
            </swiper>
            <span class="btnLeft swiper-button-prev indexPage"></span>
            <span class="btnRight swiper-button-next indexPage"></span>
        </div>
        <div class="bottomIcon swiper-pagination" slot="pagination">
        </div>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    export default{
        name : "banner",
        props:["indexMsg"],
        data () {
            return {
                /* swiperOption: {
                     pagination: {
                            el: '.swiper-pagination',
                            clickable: true
                    }, 
                    
                    pagination: '.swiper-pagination',
                    paginationClickable :true,
                    autoplay:3000,
                    speed: 2000,
                    loop: true,
                    lockSwipes: true,
                    
                } */
                swiperOption: {
                    prevButton: ".swiper-button-prev", //上一张
                    nextButton: ".swiper-button-next", //下一张
                    pagination: '.swiper-pagination',//点击页码切换
                    paginationClickable :true,//点击页码切换
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    autoplay:3000,
                    speed: 1000,
                    loop: true,
                },
            }
        },
        mounted () {
            
        },
    }
</script>
<style scope>
.banner{
    padding-top:2px;
    width: 1260px;
    height: 570px;
    /* padding-bottom: 53px; */
    position: relative;
    /* margin-bottom: 17px; */
}
.banner .btnLeft,.banner .btnRight{
    top: 46%!important;
}
.banner img{
    width: 100%;
    height: 570px;
    border-radius: 5px;

}
.bottomIcon{
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    height: 24px;
    text-align: center;
}

.bottomIcon span{
    display: inline-block;
    width: 12px;
    height: 12px!important;
    border-radius: 5px;
    margin: 0 7px;
    outline: none;
    /* border: 1px solid #989797; */
    background: #fff;
}
.swiper-pagination-bullet{
    opacity: 1!important;
    background: #fff!important;
}
.swiper-pagination-bullet-active{
    background: #ea514b!important;
}
.swiper-slide{
    padding-top: 0;
}
.indexBanner .btnLeft,.indexBanner .btnRight{
    width: 66px;
    height: 66px;
}
.indexBanner .btnLeft{
    background: url(./img/newLeft.png) no-repeat center;
}
.indexBanner .btnRight{
    background: url(./img/newRight.png) no-repeat center;
}
.indexBanner .indexPage{
    opacity:0;
    transition:all .5s;
}
.indexBanner:hover >.indexPage{
    opacity:1;
}

</style>

